<template>
    <div>


        <crumbs></crumbs>
        <div class="name">问题类型订制</div>
        <div class="top">
            <!-- pick -->


            <div class="pickdata">
                <el-date-picker v-model="value1" type="datetimerange" range-separator="To" start-placeholder="Start date"
                    end-placeholder="End date" class="pick" />
            </div>

            <!-- asearch -->

            <div class="asearch" :msg="xinjian">
                <div class="atop">
                    <div class="right">
                        <el-input v-model="input" class="w" size="large" placeholder="请输入搜索关键字" />
                        <div class="button">
                            <el-button type="primary" class="btn" @click="search">搜索</el-button>
                        </div>
                    </div>
                    <div class="button1">
                        <el-button type="primary" class="btn1" @click="addApprove">新建问题</el-button>
                    </div>

                    <!-- 弹窗 -->
                    <el-dialog v-model="dialogFormVisible" title="新建问题 ">
                        <el-from v-model="formData">
                            <div class="input">
                                <p>问题id：</p>
                                <el-input v-model="id" placeholder="请输入问题id" class="elinput" />
                            </div>
                            <div class="input">
                                <p>问题类型：</p>
                                <el-input v-model="p_type" placeholder="请输入问题类型" class="elinput" />
                            </div>

                        </el-from>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="addIssue">保存</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
                            </span>
                        </template>
                    </el-dialog>

                </div>
            </div>
        </div>
        <!-- list -->

        <div>
            <el-table :data="tableData" border style="width: 100%" #default="scope">
                <el-table-column prop="id" label="序号" align="center" />
                <el-table-column prop="p_type" label="问题类型" align="center" />
                <el-table-column prop="create_date" label="创建时间" align="center" />

                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="danger" @click="del(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>


            </el-table>

            <page></page>
        </div>

        <div style="margin-left: 20px;" id="pageall">
            <el-pagination :current-page="page.pageNum" :page-size="page.pageSize" :page-sizes="[2, 5, 10, 20]"
                layout="total, sizes, prev, pager, next, jumper" :total="totallenght" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<script>


import crumbs from "../../components/ServiceManagement/crumbs/crumbs.vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, toRefs, reactive, defineComponent, onMounted } from "vue"
import axios from 'axios'
export default {
    name: "issue",
    props: ['msg'],
    setup() {
        let tableData = ref([])
        const getDate = (timestamp) => {
            var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '/';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
            var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
            return Y + M + D + h + m + s;
        }
        for (let i = 0; i < tableData.value.length; i++) {
            tableData.value[i].create_date = getDate(tableDat.value[i].create_date)
            console.log(897, tableDat.value[i].create_date)
        }
        const value1 = ref < [Date, Date] > ([
            new Date(2000, 10, 10, 10, 10),
            new Date(2000, 10, 11, 10, 10),
        ])
        const value2 = ref('')
        const shortcuts = [
            {
                text: 'Last week',
                value: () => {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                    return [start, end]
                },
            },
            {
                text: 'Last month',
                value: () => {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                    return [start, end]
                },
            },
            {
                text: 'Last 3 months',
                value: () => {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                    return [start, end]
                },
            },
        ]
        const xinjian = ref('新建问题类型')
        const quxiao = ref('取消')
        const baocun = ref('保存')
        const input = ref("")
        const id = ref("")
        const p_type = ref("")
        const formData = ref("")
        const value = ref("")
        const create_date = ref("")
        const options = [
            {
                value: "OPtion1",
                label: "option1"
            }
        ]
        axios({
            url: "http://172.16.123.99:8080/Problem/findProblemList",
            method: "get",
            params: {
                limit: 1,
                currentPage: 1,
                pageSize: 10
            }
        }).then(
            resp => {
                console.log(resp.data.data);
                tableData.value = JSON.parse(resp.data.data)
                const getDate = (timestamp) => {
                    var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                    var Y = date.getFullYear() + '/';
                    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
                    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                    var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
                    var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
                    var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                    return Y + M + D + h + m + s;
                }
                for (let i = 0; i < tableData.value.length; i++) {
                    tableData.value[i].create_date = getDate(tableData.value[i].create_date) 
                }
            }
        )
        const del = (index, row) => {
            ElMessageBox.confirm('确定删除该数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    url: 'http://172.16.123.99:8080/Problem/delProblemmsg',
                    method: 'post',
                    params: {
                        id: row.id
                    }
                }).then((res) => {
                    if (res.data.code === 200) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功!'
                        });
                        tableData.value.splice(index, 1)

                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败!'
                        });
                    }
                }).catch((err) => {
                    console.log('错误了', err);
                })
            }).catch(() => {
                //点击了取消按钮
                ElMessage({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
        const data = reactive({
            dialogFormVisible: false
        })

        const addIssue = () => {
            console.log("addissue");
            data.dialogFormVisible = false;
            axios({
                url: "http://172.16.123.99:8080/Problem/addProblemmsg",
                method: "post",
                params: {
                    id: id.value,
                    p_type: p_type.value
                }
            }).then(
                resp => {
                    console.log(resp.data);
                    tableData.value.push({
                        id: id.value,
                        p_type: p_type.value
                    })
                    const getDate = (timestamp) => {
                        var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                        var Y = date.getFullYear() + '/';
                        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
                        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                        var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
                        var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
                        var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                        return Y + M + D + h + m + s;
                    }
                    for (let i = 0; i < tableData.value.length; i++) {
                        tableData.value[i].create_date = getDate(tableDat.value[i].create_date)
                        console.log(897, tableDat.value[i].create_date)
                    }
                }

            )
        }


        const addApprove = () => {
            console.log("新建添加");
            data.dialogFormVisible = true
        }

        const search = () => {
            console.log("111111", input.value);
            axios({
                url: "http://172.16.123.99:8080/Problem/searchProblemmsg",
                method: "post",
                params: {
                    p_type: input.value,
                    currentPage: 1,
                    pageSize: 10,
                    id: input.value
                }
            }).then(
                resp => {
                    tableData.value = []
                    tableData.value = JSON.parse(resp.data.data)
                    console.log(tableData.value);
                    console.log(resp.data);
                    const getDate = (timestamp) => {
                        var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                        var Y = date.getFullYear() + '/';
                        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
                        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                        var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
                        var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
                        var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                        return Y + M + D + h + m + s;
                    }
                    for (let i = 0; i < tableData.value.length; i++) {
                        tableData.value[i].create_date = getDate(tableDat.value[i].create_date)
                        console.log(897, tableDat.value[i].create_date)
                    }
                }
            )
        }



        //分页
        let totallenght = ref()
        const page = reactive({//配置对应的查询参数
            pageNum: 1,
            pageSize: 5,
        });
        function GetUserData() {
            axios({
                url: 'http://172.16.123.99:8080/Problem/findProblemList',
                method: 'post',
                params: {
                    currentPage: page.pageNum,
                    pageSize: page.pageSize,
                }
            }).then(resp => {
                tableData.value = JSON.parse(resp.data.data)
                console.log('00000000', resp.data)
                totallenght.value = resp.data.conut
                console.log(66666666666, totallenght.value)
                const getDate = (timestamp) => {
                    var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                    var Y = date.getFullYear() + '/';
                    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
                    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                    var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
                    var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
                    var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                    return Y + M + D + h + m + s;
                }
                for (let i = 0; i < tableData.value.length; i++) {
                    tableData.value[i].create_date = getDate(tableData.value[i].create_date)
                }
            })
        }
        onMounted(() => {
            GetUserData()
        })
        const handleSizeChange = (val) => {
            page.pageSize = val
            console.log(val)
            GetUserData();
        }
        const handleCurrentChange = (val) => {
            page.pageNum = val
            console.log(val)
            GetUserData();
        }
        //3.导出   如果想要数据在外部渲染 必须得导出
        return {
            xinjian,
            input,
            p_type,
            id,
            search,
            formData,
            value,
            options,
            quxiao,
            baocun,
            addApprove,
            addIssue,
            ...toRefs(data),
            ref,
            del,
            tableData,
            ElMessage,
            ElMessageBox,
            create_date,
            totallenght,
            handleSizeChange,
            handleCurrentChange,
            page,
            getDate

        };
    },
    components: {
        crumbs,
    }
}
</script>
<style scoped>
.name {
    text-align: left;
    margin-top: 20px;
    font-weight: bold;
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
}

.pickdata {
    width: 30%;

}

.asearch {
    width: 70%;
}



.atop {
    display: flex;
    flex-direction: row;
    align-items: center;

    justify-content: space-between;
}

.mybtn {
    display: flex;
    flex-direction: row;
    align-items: center;

    justify-content: center;
}

.input {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.elinput {
    width: 90%;
}

.select {
    width: 134px;
}

.right {
    display: flex;
}

.w {
    height: 38px;
}


.button {
    margin-left: 10px;
}

.btn {
    height: 38px;

}

.button1 {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;


}

.btn1 {
    height: 38px;
    float: right;

}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.block {

    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
    margin-right: 10px;
    display: flex;
    justify-items: center;

}

.block:last-child {
    border-right: none;
}

.block .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.pick {
    height: 40px;
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}

#pageall {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
</style>